import React, { useEffect } from 'react';

// 声明 dotlottie-player 自定义元素类型
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'dotlottie-player': {
        src?: string;
        background?: string;
        speed?: string;
        style?: React.CSSProperties;
        loop?: boolean;
        autoplay?: boolean;
        className?: string;
      };
    }
  }
}

interface VoiceLottieProps {
  className?: string;
  style?: React.CSSProperties;
}

/**
 * VoiceLottie 组件
 * 用于渲染语音相关的 Lottie 动画
 * 大小和样式由父组件通过 props 控制
 * 优化版本：避免多实例冲突的脚本管理
 */
const VoiceLottie: React.FC<VoiceLottieProps> = ({ className, style }) => {
  useEffect(() => {
    // 检查是否已经加载了 dotlottie-player
    if (!customElements.get('dotlottie-player')) {
      // 动态加载 dotlottie-player 脚本
      const script = document.createElement('script');
      script.src = 'https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs';
      script.type = 'module';
      script.id = 'dotlottie-player-script'; // 添加ID便于管理
      document.head.appendChild(script);

      // 不在清理函数中移除脚本，因为其他组件实例可能还在使用
      // 脚本将在页面卸载时自动清理
    }
  }, []);

  return (
    <dotlottie-player
      src="https://lottie.host/c901e3b2-1573-4aab-aebb-de5e86395d0b/0jvq5omfDg.lottie"
      background="transparent"
      speed="1"
      loop
      autoplay
      className={className}
      style={style}
    />
  );
};

export default VoiceLottie; 